<template>
  <Modal
    :closable="false"
    :centered="true"
    :bodyStyle="{ width: '100%', height: '900px', overflow: 'auto' }"
    :style="{ width: '90%' }"
    v-model:visible="showPrivacyStatement"
    okText="我已知晓"
    @ok="handleShowPrivacyStatement"
    cancelText=" "
  >
    <PrivacyStatement />
  </Modal>
  <!-- center box -->
  <div class="relative w-full h-full px-4 saas-landing-login">
    <div class="container relative h-full py-2 mx-auto sm:px-10">
      <div class="flex h-full">
        <!-- brief product introction, hidden when width less than xl(1200px)  -->
        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12 bg-light-500">
          <div class="my-auto">
            <img src="../../../assets/svg/login-box-bg.svg" class="w-1/2 -mt-16 -enter-x" />
            <div class="mt-10 font-medium text-white-50 -enter-x">
              <span class="inline-block mt-4 text-3xl"> {{ t('routes.common.login.signInTitle') }}</span>
            </div>
            <div class="mt-5 font-normal text-white-50 text-md dark:text-light-500">
              {{ t('routes.common.login.signInDesc1') }}
              <br />
              {{ t('routes.common.login.signInDesc2') }}
            </div>
          </div>
        </div>
        <!-- login Box -->
        <div class="flex py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
          <div
            class="
              relative
              w-full
              px-5
              py-8
              mx-auto
              my-auto
              rounded-md
              shadow-md
              xl:ml-16
              sm:px-8
              xl:p-4 xl:shadow-none xl:w-auto
              enter-x
              bg-sl-slWhite
            "
          >
            <LoginForm @show="handleShowPrivacyStatement" />
            <Transition name="slide-fade">
              <div>
                <SaaSRegisterForm @showPrivacy="handleShowPrivacyStatement" />
              </div>
            </Transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
import LoginForm from './LoginForm.vue';
import { Modal } from 'ant-design-vue';
import SaaSRegisterForm from './SaaSRegisterForm.vue';
import { ref } from 'vue';
import PrivacyStatement from './PrivacyStatement.vue';
import { changeFavicon, changeHTMLTitle, getAppLogo } from './useLogin';

/* eslint-disable max-len */

const { t } = useI18n();
const showPrivacyStatement = ref(false);
function handleShowPrivacyStatement() {
  showPrivacyStatement.value = !showPrivacyStatement.value;
}

const replaceLogoAndName = async () => {
  await getAppLogo();
  changeHTMLTitle();
  changeFavicon();
};

replaceLogoAndName();
</script>

<style lang="less">
// 引入全局变量，媒体查询临界点

.saas-landing-login {
  min-height: 100%;
  overflow: hidden;
  @media (max-width: @screen-xl) {
    background-color: #293146;
    .saas-landing-form {
      background-color: #fff;
    }
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(/@/assets/svg/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: '';
    @media (max-width: @screen-xl) {
      display: none;
    }
  }
}
</style>
